<template>
  <!--
        action: 上传的接口地址，采用el-upload的默认方式进行图片的
                上传，需要后台接口支持才行， 一般都不会用，设置为空字符串就行了
        show-file-list： 是否展示文件列表，我们不需要展示
        before-upload：  选择文件之后，会自动调用该钩子函数
                         进行文件的检查，
                         钩子函数返回true表示文件校验通过
                               返回false表示校验不通过
        http-request:   选择文件之后，校验通过，调该方法实现上传
      -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="httpRequest"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>
<script>
import COS from 'cos-js-sdk-v5'

const cos = new COS({
  SecretId: 'AKIDqZ4OVO2SeaMuCF3buxlIacOuCH9mAJDs',
  SecretKey: 'UjjV2KNAk5A0bx4xc2D9qJXWGl23pRkn'
})

export default {
  props: {
    value: {
      type: String,
      default: null
    }
  },
  methods: {
    // 检查文件是否合格的方法
    beforeAvatarUpload(file) {
    //   console.log(file)
      const fileTypes = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      const isFileTypeValid = fileTypes.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isFileTypeValid) {
        this.$message.error('上传头像图片只能是 JPG、GIF、BMP和PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isFileTypeValid && isLt2M
    },
    // 上传文件的核心方法
    httpRequest({ file }) {
      // file (用户选择的文件)  file.name (文件名)
      cos.uploadFile({
        Bucket: 'heimhr-1258058856', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，非必须 */
        onProgress: function(progressData) { /* 非必须 */
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        // 上传成功或失败之后执行的代码
        // console.log(err || data)
        // 1. 判断是否上传成功，上传失败，提示错误信息
        if (err) {
          return this.$message.error('上传失败')
        }
        // 2. 如果成功则子传父
        const url = 'https://' + data.Location
        this.$emit('input', url)
      })
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

